<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
    <title>房间管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="../css/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/index.css" type="text/css">
    <link rel="stylesheet" href="../css/jedate.css" type="text/css">
    <script src="../js/lib/jquery.min.js?v=20170408"></script>
    <script src="../js/lib/jquery.cookie.js?v=20170408"></script>
    <script src="../js/lib/jsrender.js?v=20170408"></script>
    <script src="../js/jeDate/jquery.jedate.min.js?v=2017316"></script>
    <script src="../js/lib/bootstrap.min.js?v=20170408"></script>
    <script src="../js/lib/bootstrap-table.min.js?v=20170408"></script>
    <script src="../js/lib/bootstrap-table-zh-CN.min.js?v=20170408"></script>
    <script src="../js/lib/vue.min.js?v=20170408"></script>
    <script src="../js/common.js?v=20170408"></script>
    <script src="../js/main.js?v=20170408"></script>
    <style>
        .box-title {
            font-size: 24px;
            color: #444;
            display: block;
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="productMain">
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                  <!--  <div class="form-group">
                            <label class="col-md-1 control-label form-inline">创建时间</label>
                            <div>
                                <input class="form-control straTime" v-model="startTime" id="selstartTime" style="cursor:pointer!important;background-color: white!important;font-size: 12px!important;height: 30px!important;"  type="text" readonly="true"  placeholder="请选择开始时间">
                                至
                                <input class="form-control selTime" v-model="endTime" id="selendTime" style="cursor:pointer!important;background-color: white!important;font-size: 12px!important;height: 30px!important;"   type="text" readonly="true"  placeholder="请选择结束时间" >
                            </div>-->
                        <label class="col-md-1 control-label">状态</label>
                        <div class="col-md-2">
                            <select  name="status" id="status" style="font-size: 12px!important;">
                                <option value="">全部</option>
                                <option value="1">正常</option>
                                <option value="0">关闭</option>
                            </select>
                        </div>

                        <div class="col-md-1">
                            <button type="button" style="font-size: 14px!important;height: 30px!important;line-height: 0px;!important;border-color:#576b95;background-color: #576b95;" class="btn btn-primary pull-left" @click="turnPage(1)">搜索</button>
                        </div>
                        <!--<label class="col-md-2 control-label">三方SKU</label>-->
                        <!--<div class="col-md-2">-->
                        <!--<input type="text" class="form-control" id="selSku" placeholder="">-->
                        <!--</div>-->
                    </div>
                </form>
            </div>
        </div>

        <table id="table" class="table table-hover table-bordered">
            <thead>
            <tr>
                <span class="box-title">当前检索条件共有{{totalNum}}条数据</span>
                <th class="text-center">序号</th>
                <th class="text-center">房间ID</th>
                <th class="text-center">东玩家ID</th>
                <th class="text-center">西玩家ID</th>
                <th class="text-center">南玩家ID</th>
                <th class="text-center">北玩家ID</th>
               <!-- <th class="text-center">状态</th>
                <th width="100px" class="text-center">操作</th>-->
            </tr>
            </thead>
            <tbody id="tbody">
            <tr v-for="room in roomList" v-if="roomList.length>0">
                <td style="width: 29px;vertical-align: middle;text-align: center;" v-text="$index+1"></td>
                <td style="width: 50px;vertical-align: middle;text-align: center;" v-text="room.roomid"></td>
                <td style="width: 60px;vertical-align: middle;text-align: center;" v-text="room.dong"></td>
                <td style="width: 60px;vertical-align: middle;text-align: center;" v-text="room.xi"></td>
                <td style="width: 60px;vertical-align: middle;text-align: center;" v-text="room.nan"></td>
                <td style="width: 60px;vertical-align: middle;text-align: center;" v-text="room.bei"></td>
               <!-- <td style="width: 60px;vertical-align: middle;text-align: center;" v-text="room.status | stateFilter"></td>
                <td style="width: 60px;vertical-align: middle;text-align: center;">
                    <a href="javascript:void(0);"class="btn btn-primary btn-xs"style="background-color:#f2ae43;border-color:#f2ae43;"  @click="disConfirm(room)">
                        <span v-if="room.status==0">激活</span>
                        <span v-if="room.status==1">封号</span>
                    </a>
                </td>-->
            </tr>
            <tr id="tab">

            </tr>
            </tbody>
        </table>
        <div class="footer-nav" v-if="roomList.length>0">
            <!--<ul class="pagination">-->
            <!--<li><a style="color: #428bca;" class="disableHref">总条数:{{totalNum}}</a></li>-->
            <!--</ul>-->
            <!--<ul class="pagination">-->
            <!--<li v-if="curIndex!=1"><a href="javascript:;" @click="getProductList(1)">首页</a></li>-->
            <!--<li  v-if="curIndex!=1"><a href="javascript:;" @click="prevPage">上一页</a></li>-->
            <!--<li v-for="pageIndex in pageList" v-bind:class="{'active':curIndex==parseInt(pageIndex+curNum)}"><a href="javascript:;" @click="getProductList(pageIndex+curNum)" v-text="pageIndex+curNum"></a></li>-->
            <!--<li v-if="curIndex!=totalPage"><a href="javascript:;" @click="nextPage">下一页</a></li>-->
            <!--<li v-if="curIndex!=totalPage"><a href="javascript:;" @click="getProductList(totalPage)">末页</a></li>-->
            <!--</ul>-->
            <ul class="pagination">
                <li><a style="color: #428bca;" class="disableHref">总条数:{{totalNum}}</a></li>
            </ul>
            <ul class="pagination">
                <li v-if="curIndex!=1"><a href="javascript:;"   @click="turnPage(1)" >首页</a></li>
                <li v-if="curIndex!=1"><a href="javascript:;" @click="prevPage">上一页</a></li>
                <li v-for="pageIndex in pageList" v-bind:class="{'active':curIndex==parseInt(pageIndex+curNum)}"><a href="javascript:;" @click="turnPage(pageIndex+curNum)" v-text="pageIndex+curNum"></a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="nextPage">下一页</a></li>
                <li v-if="curIndex!=totalPage"><a href="javascript:;" @click="turnPage(totalPage)">末页</a></li>
            </ul>
        </div>
    </div>
</div>

<!--禁用按钮-->
<div class="modal fade" id="delDisable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: 14px; text-align: left;">确定是否封号?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"  data-dismiss="modal" @click="cancelDisable()">确定</button>
            </div>
        </div>
    </div>
</div>
<!--启用按钮-->
<div class="modal fade" id="delEnable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: 14px; text-align: left;">确定是否激活?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"  data-dismiss="modal" @click="cancelDisable()">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
       // validatePermission();
        //日期显示
        var start = {
            format: 'YYYY-MM-DD hh:mm:ss',
            hmsSetVal:{hh:00,mm:00,ss:00},
            isinitVal:false,
            ishmsVal:false,
            maxDate: '2099-06-30 23:59:59', //最大日期
            choosefun: function(elem,datas){
                end.minDate = datas; //开始日选好后，重置结束日的最小日期
            }
        };
        var end = {
            format: 'YYYY-MM-DD hh:mm:ss',
            hmsSetVal:{hh:23,mm:59,ss:59},
            isinitVal:false,
            ishmsVal:false,
            maxDate: '2099-06-16 23:59:59', //最大日期
            choosefun: function(elem,datas){
                start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
            }
        };
        $('#selstartTime').jeDate(start);
        $('#selendTime').jeDate(end);

        // validatePermission();
        var pag=$.getUrlParam('pag');
        if( pag == null || pag==undefined || pag==""){
            pag=1;
        }
        //浏览器带搜索参数
        var startTime = $.getUrlParam('startTime')||"";
        var endTime = $.getUrlParam('endTime')||"";
        var status = $.getUrlParam('status')||"";
        $("#selstartTime").val(startTime);
        $("#selendTime").val(endTime);
        $("#status").val(status);
        //实例化一个Vue对象
        window.vm = new Vue({
            el:"body",//指的是,Vue需要监听的范围,这个地方写body是为了监听整个页面,也可以控制某一块区域
            data:{
                "roomList":[],//需要循环遍历的对象
                "pageList":[],
                "totalPage":0,
                "totalNum":0,
                "curNum":1,
                "curIndex":pag,
                "startTime":startTime,
                "endTime":endTime,
                "status":status,
                "page": "1",//当前第几页
                "limit": "20"//每页多少条
            },
            ready:function () {
                this.getRoomList(pag);//初始化,第一次进来查询商品列表
            },
            filters: {
                stateFilter: function (status) {
                    switch(status){
                        case 1:
                            return "正常";
                        case 0:
                            return "关闭";
                    }
                }
            },
            methods: {
                pageInit:function (pageNum) {
                    if(pageNum==1 || 9+pageNum-5<this.totalPage || this.totalPage<=11){
                        if(this.totalPage<=11){
                            this.curNum = 1;
                        }else if(pageNum-5>0){
                            this.curNum = pageNum-5;
                        }else if(this.totalPage>11){
                            this.curNum = 1;
                        }
                    }else if(pageNum>1){
                        if(pageNum-5>0){
                            this.curNum = this.totalPage-10;
                        }
                    }
                    this.curIndex = parseInt(pageNum);
                },
                setPage:function (totalNum,pageNum) {
                    //根据一页10条,计算一共有多少页
                    this.totalPage = Math.ceil(totalNum/20);
                    if(this.totalPage<12){
                        //如果不满11页,那么保存当前的总页数,比如可能只有5页,那么totalPage=5
                        this.pageList = this.totalPage;
                    }else{
                        this.pageList = 11;//默认最多显示11页
                    }
                    this.pageInit(pageNum);
                },


                //查询房间列表
                getRoomList: function (pageNum) {
                    var _this = this;
                    common.lightBox.showLoading();
                    //接口请求
                    $.postRequest(majiangurl + "room/searchRoomList", {
                        "str" : JSON.stringify({
                            "startTime":startTime,
                            "endTime": endTime,
                            "status":status,
                            "page": parseInt(this.curIndex),
                            "limit": "20",
                        })
                    }, function (res) {
                        common.lightBox.hideLoading();
                        if (res.result.rows.length != 0) {
                            //把接口返回的值保存到userList中
                            _this.roomList = res.result.rows;
                            _this.setPage(res.result.count,parseInt(pageNum));
                            _this.totalNum = res.result.count;
                            //_this.pageInit(pageNum);
                            $("#tab").empty();
                        }else{
                            _this.totalNum = 0;
                            $("#tab").html('<td style="font-size: 20px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;text-align: center;"colspan="8">没有数据</td>')
                            _this.roomList = [];
                        }
                    })
                },
                prevPage:function () {
                    if(this.curIndex==1){
                        return;
                    }
//                    this.getProductList(this.curIndex-1);
                    this.turnPage(this.curIndex-1);

                },
                nextPage:function () {
                    if(this.curIndex==this.totalPage){
                        return;
                    }
//                    this.getProductList(this.curIndex+1);
                    this.turnPage(this.curIndex+1);
                },
                turnPage:function(pageNo){
                    //this.pageInit(pageNo);
                    var startTime = $("#selStartTime").val() || ""
                    var endTime = $("#selendTime").val() || "";
                    var status = $("#status").val() || "";
                    window.location.href = window.location.pathname +"?pag="+pageNo+"&startTime="+startTime+"&endTime="+endTime+"&status="+status;

                }
            }
        });
    })
</script>
</body>
</html>